<template>
  <AdminLayout title="分类管理" subtitle="管理产品分类">
    <template #actions>
      <Link :href="route('admin.categories.create')" 
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        添加分类
      </Link>
    </template>

    <!-- 状态切换确认对话框 -->
    <ConfirmDialog
      :show="showStatusDialog"
      :title="statusDialogData.action === 'enable' ? '启用分类' : '禁用分类'"
      :message="statusMessage"
      type="warning"
      confirm-text="确定"
      @close="showStatusDialog = false"
      @confirm="confirmStatusChange"
    />

    <!-- 删除确认对话框 -->
    <ConfirmDialog
      :show="showDeleteDialog"
      title="删除分类"
      :message="deleteMessage"
      :warning="deleteDialogData.products_count > 0 ? `该分类下还有 ${deleteDialogData.products_count} 个产品，删除前请先转移或删除相关产品。` : ''"
      type="danger"
      confirm-text="删除"
      @close="showDeleteDialog = false"
      @confirm="confirmDelete"
    />

    <!-- 分类列表 -->
    <div class="bg-white shadow-sm rounded-lg">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">分类列表</h3>
      </div>
      
      <div class="overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                分类名称
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                描述
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                产品数量
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                排序
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="category in categories" :key="category.id" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <div class="h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
                      <svg class="h-6 w-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                      </svg>
                    </div>
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">{{ category.name }}</div>
                    <div class="text-sm text-gray-500">{{ category.slug }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900">{{ category.description || '-' }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                  {{ category.products_count }} 个产品
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ category.sort_order }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="[
                  category.is_active 
                    ? 'bg-green-100 text-green-800' 
                    : 'bg-red-100 text-red-800',
                  'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium'
                ]">
                  {{ category.is_active ? '启用' : '禁用' }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex space-x-2">
                  <Link :href="route('admin.categories.edit', category.id)" 
                        class="text-gray-600 hover:text-gray-900 transition-colors duration-200">
                    编辑
                  </Link>
                  <button @click="toggleStatus(category)" 
                          :class="[
                            category.is_active 
                              ? 'text-red-600 hover:text-red-900' 
                              : 'text-green-600 hover:text-green-900',
                            'transition-colors duration-200'
                          ]">
                    {{ category.is_active ? '禁用' : '启用' }}
                  </button>
                  <button @click="deleteCategory(category)" 
                          class="text-red-600 hover:text-red-900 transition-colors duration-200">
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'
import { useNotification } from '@/composables/useNotification'

const props = defineProps({
  categories: {
    type: Array,
    required: true
  }
})

// 通知功能
const { showSuccess, showError } = useNotification()

// 状态切换对话框
const showStatusDialog = ref(false)
const statusDialogData = ref({
  id: null,
  name: '',
  action: 'enable'
})

// 删除确认对话框
const showDeleteDialog = ref(false)
const deleteDialogData = ref({
  id: null,
  name: '',
  products_count: 0
})

const toggleStatus = (category) => {
  statusDialogData.value = {
    id: category.id,
    name: category.name,
    action: category.is_active ? 'disable' : 'enable'
  }
  showStatusDialog.value = true
}

const confirmStatusChange = () => {
  router.post(route('admin.categories.toggle-status', statusDialogData.value.id), {}, {
    onSuccess: () => {
      // 后端已经发送了 flash 消息，这里不需要重复显示
      showStatusDialog.value = false
    },
    onError: () => {
      showError('操作失败', '状态切换失败，请重试')
    }
  })
}

const deleteCategory = (category) => {
  deleteDialogData.value = {
    id: category.id,
    name: category.name,
    products_count: category.products_count
  }
  showDeleteDialog.value = true
}

const confirmDelete = () => {
  router.delete(route('admin.categories.destroy', deleteDialogData.value.id), {
    onSuccess: () => {
      // 后端已经发送了 flash 消息，这里不需要重复显示
      showDeleteDialog.value = false
    },
    onError: () => {
      showError('删除失败', '删除分类失败，请重试')
    }
  })
}

// 计算属性
const statusMessage = computed(() => {
  const action = statusDialogData.value.action === 'enable' ? '启用' : '禁用'
  return `确定要${action}分类"${statusDialogData.value.name}"吗？`
})

const deleteMessage = computed(() => {
  return `确定要删除分类"${deleteDialogData.value.name}"吗？此操作不可恢复！`
})
</script>
